import {Tree} from "antd";
import {Menu, Item, useContextMenu} from "react-contexify";
import 'react-contexify/ReactContexify.css';

const TreeWithMenu = ({dataSource, contextMenu}) => {

    const MENU_ID = "menu-id";
    const {show} = useContextMenu({id: MENU_ID});


    const Menus = () => (
        <Menu id={MENU_ID}>
            {contextMenu.items.map(item => (
                <Item onClick={item.handler}>{item.name}</Item>
            ))}
        </Menu>
    )

    const handleContextMenu = (event, node) => {
        show({
            event,
            props: node
        })
    }

    return (
        <div>
            <Tree
                treeData={dataSource}
                onRightClick={({event, node}) => {handleContextMenu(event, node)}}>
            </Tree>
            <Menus/>
        </div>
    );
}

export default TreeWithMenu;
